import React, { Component } from 'react';
import { Card, Form, Input, Button, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
// import '../css/detail.css';
import LinkButton from './LinkButton';
import UploadPhotos from './UploadPhotos';
import MemoryUtils from '../utils/MemoryUtils';
import RichTextEditor from './RichTextEditor';

const Item = Form.Item;


export default class AddArtical extends Component {
    state = {
        currentTime: ''
    }
    constructor(props) {
        super(props);
        this.photoRef = React.createRef();
        this.editorRef = React.createRef();
    }

    render() {
        const title = (
            <span>
                <LinkButton onClick={() => this.props.history.goBack()} ><ArrowLeftOutlined /></LinkButton>
                <span>文章发布</span>
            </span>
        )
        const formLayout = {
            labelCol: { span: 2 },
            wrapperCol: { span: 8 }
        }
        const onFinish = (values) => {
            const content_content = this.editorRef.current.getDetail();
            console.log(content_content);
            function Today(time,date1) {
                let year = date1.getFullYear();
                let month = date1.getMonth();
                month = month + 1;
                let currentDay = date1.getDate();
                let hour = date1.getHours();
                let min = date1.getMinutes();
                let second = date1.getSeconds();
                hour = convertTimer(hour);
                min = convertTimer(min);
                second = convertTimer(second);
                time = year + "-" + month + "-" + currentDay + ' ' +  hour + ":" + min + ":" + second;
                return time;
            }
            function convertTimer(start) {
                return start < 10 ? ("0" + start) : start;
            }
            let date1 = new Date()
            let time = Today(this.state,date1);
            fetch('http://82.157.94.115:2005/insertContent', {
                method: 'POST',
                body: JSON.stringify({content_time:time, content_content:content_content,...values}),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(res => res.json())
                .then(res => {
                    message.success('文章发布成功！')
                    this.props.history.goBack()
                })
                .catch(error => {
                    message.error('文章发布失败！')
                })

        }
        return (
            <div>
                <Card title={title} >
                    <Form {...formLayout} onFinish={onFinish} >
                        <Item
                            label="文章名称"
                            name="content_title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入文章名称',
                                },
                            ]}
                        >
                            <Input placeholder='文章名称'></Input>
                        </Item>

                        <Item label="文章配图">
                            <UploadPhotos ref={this.photoRef} />
                        </Item>
                        <Item label="文章内容" wrapperCol={{ span: 20 }}>
                            <RichTextEditor ref={this.editorRef} />
                        </Item>
                        <Item>
                            <Button type='primary' htmlType='submit'>提交</Button>
                        </Item>
                    </Form>
                </Card>
            </div>
        )
    }
}
